@charset "UTf-8";

@import "common";


.wrap{
    /** 中间内容部分 **/
    section{
        min-width: 854px;
        /**轮播图**/
        .s_shuffling{
            width:100%;
            height: auto;
            overflow: hidden;
            text-align: center;
            img{
                max-width: 100%;
                vertical-align: middle;
            }
        }
        /**游戏列表**/
        .s_gamelist{
            width:69.4%;
            height: auto;
            margin: 0 auto;
            .title{
//              width: 400px;
                color: $c7;
                div{
                    float: left;
                    font-size: 18px;
                    span{
                        &:first-of-type{
                            font-size: $font-35;
                            color: black;
                        }
                        &:nth-child(2){
                            color: black;
                            &::before{
                                @include newline;
                            }
                        }
                    }
                }
                p{
                    float: left;
                    font-size: $font-12;
                    line-height: 20px;
                    margin: 5px 0px 0px 12px;
                }
            }
            /**经典案例分享**/
            .game_classic{
                width: 100%;
                min-width: 854px;
                .plane{
                    width:45.6%;
                    min-width: 417px;
                    height: 171px;
                    border: 1px solid $ea;
                    display: inline-block;
//                  &:nth-of-type(odd){
//                      float: left;
//                  }
//                  &:nth-of-type(2n){
//                      float: right;
//                  }
                    .p_list{
                        float: left;
                        &:first-of-type{
                            div{
                                width: 55px;
                                height:56px; 
                                &:last-child{
                                    background: #363942;
                                    &:hover{
                                        i{
                                            color: $bblue;
                                        }
                                    }
                                }
                                &:nth-child(2){
                                    background: #fed736;
                                    text-align: center;
                                    span{
                                        &:first-child{
                                            display: block;
                                            font-size:$font-26;
                                            color: #222222;
                                        }
                                        &:last-child{
                                            font-size: $font-12;
                                            color: #535353;
                                        }
                                    }
                                }
                                &:last-child{
                                    text-align: center;
                                    line-height: 56px;
                                    i{
                                        font-size: 30px;
                                        color: white;
                                        vertical-align: middle;
                                    }
                                }
                            }
                        }
                        &:nth-of-type(2){
                            width: 192px;
                            text-align: right;
                            margin: 20px 14px  0px 10px;
                            span{
                                font-size:$font-12;
                                color: $c7; 
                                &:first-child{
                                    font-size:$font-16;
                                    color: black;
                                }
                                &:nth-child(2){
                                    display: block;
                                    margin-top:10px ;
                                }
                                &:after{
                                    @include newline;
                                }
                            }
                        }
                        &:last-of-type{
                            position: relative;
                            width:34.6%;
                            height: 100%;
                            float: right;
                            div:first-child{
                               float: right; 
                               width:100%;
                               height: 100%;
                               @include imgoverflow;
                               line-height: 100%;
                               cursor: pointer;
                               img{
                                    width: 100%;
                                    height: 100%;
                                    vertical-align: middle;
                               }
                               
                           }
                           /***添加遮罩层**/
                           &:hover{
                               .add{
                                   display: block;
                                   opacity: .8;
                                   animation: all .5s ease;
                               }
                           }
                           .add{
                               width: 100%;
                               height: 100%;
                               position:absolute;
                               background: $yellow;
                               display: none;
                               line-height: 171px;
                               text-align: center;
                               i{
                                   display: inline-block;
                                   vertical-align: middle;
                               }
                           }
                        }
                    }
                }
            }
        }//last of div.s_gamelist
    }
}
